<template>
  <div class="app-container calendar-list-container">
    <basic-container>
      <avue-crud
        ref="scopeTree"
        :data="tableData"
        :option="option"
        :page="page"
        :destroy-on-close="true"
        @on-load="onLoad"
        @refresh-change="searchHandler"
        @row-del="rowDelete"
        @row-update="rowUpdate"
        @row-save="rowSave"
      >
        <template slot-scope="scope" slot="menu">
          <el-button
            @click="handlerPermission(scope.row)"
            icon="icon-quanxian"
            size="small"
            v-show="getPermissions('user_role_menu_update')"
            type="text"
            >权限</el-button
          >
        </template>
      </avue-crud>
    </basic-container>
    <!--select permission-->
    <el-dialog
      :modal-append-to-body="false"
      :modal="true"
      :visible.sync="dialogPermissionVisible"
      :close-on-click-modal="false"
      title="分配权限"
    >
      <div class="dialog-main-tree">
        <el-tree
          ref="menuTree"
          :data="treeData"
          :check-strictly="false"
          :props="defaultProps"
          class="filter-tree"
          node-key="id"
          highlight-current
          show-checkbox
          default-expand-all
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="updatePermission"
          >更 新</el-button
        >
        <el-button size="small" type="default" @click="cancel()"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  addRole,
  getRole,
  updateRole,
  deleteRole,
  updatePermission,
  getPermissionByRoleId,
} from "@/api/permission/role";
import { getMenu } from "@/api/permission/menu";

export default {
  name: "",
  data() {
    return {
      permissionForm: {
        roleId: "",
        permissionIds: [],
      },
      dialogPermissionVisible: false,
      checkedKeys: [],
      defaultProps: {
        label: "name",
        value: "id",
      },
      treeData: [],
      page: {
        pageSize: 10,
        total: 10,
      },
      searchForm: {
        currentPage: 1,
        pageSizes: 10,
      },
      tableData: [],
      option: {
        border: true,
        index: true,
        indexLabel: "序号",
        stripe: true,
        menuAlign: "center",
        editBtn: this.getPermission('user_role_update'),
        delBtn: this.getPermission('user_role_delete'),
        searchMenuSpan: 6,
        align: "center",
        addBtn: this.getPermission('user_role_add'),
        viewBtn: this.getPermission('user_role_get'),
        column: [
          {
            label: "角色名称",
            prop: "name",
            span: 24,
            rules: [
              {
                required: true,
                message: "角色名称不能为空",
                trigger: "blur",
              },
              {
                max: 20,
                message: "长度在 3 到 20 个字符",
                trigger: "blur",
              },
            ],
          },
          {
            label: "创建时间",
            prop: "createTime",
            type: "datetime",
            format: "yyyy-MM-dd HH:mm",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            editDisplay: false,
            addDisplay: false,
          },
          {
            label: "角色描述",
            prop: "remark",
            span: 24,
          },
        ],
      },
    };
  },
  methods: {
    getPermissions(value) {
      return this.getPermission(value)
    },
    rowSave(form, done, loading) {
      loading();
      addRole(form)
        .then(() => {
          this.$message.success("添加成功");
          this.searchHandler();
        })
        .finally(() => {
          done();
        });
    },
    updatePermission() {
      this.permissionForm.permissionIds = this.$refs.menuTree
        .getCheckedKeys()
        .concat(this.$refs.menuTree.getHalfCheckedKeys());
      updatePermission(this.permissionForm).then(() => {
        this.$message.success("更新成功");
        this.dialogPermissionVisible = false;
        this.searchHandler();
      });
    },
    cancel() {
      this.dialogPermissionVisible = false;
    },
    handlerPermission(row) {
      this.dialogPermissionVisible = true;
      this.$nextTick(() => {
        getPermissionByRoleId(row.id).then((res) => {
          this.$refs.menuTree.setCheckedKeys(res.data);
          this.permissionForm.roleId = row.id;
        });
      });
    },
    rowUpdate(row, index, done, loading) {
      loading();
      updateRole(row)
        .then(() => {
          this.$message.success("更新成功");
          this.searchHandler();
        })
        .finally(() => {
          done();
        });
    },
    rowDelete(form) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteRole([form.id]).then(() => {
            this.$message.success("删除成功");
            this.searchHandler();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onLoad(page) {
      this.searchForm.currentPage = page.currentPage;
      this.searchForm.pageSize = page.pageSize;
      this.searchHandler();
    },
    searchHandler() {
      getRole(this.searchForm).then((res) => {
        console.log(res.data.records[0].id);
        this.tableData = res.data.records;
        this.page.total = res.data.total;
      });
    },
    getMenu() {
      getMenu().then((res1) => {
        this.treeData = res1.data;
      });
    },
  },
  created() {
    this.getMenu();
    // this.option.addBtn = getPermission('user_add')
    // console.log('AAAAA' + getPermission('user_add'))
  },
};
</script>

<style lang="less" scoped>
.el-dialog__wrapper {
  .el-dialog {
    width: 61% !important;

    .dialog-main-tree {
      max-height: 400px;
      overflow-y: auto;
    }
  }

  .el-form-item__label {
    width: 20% !important;
    padding-right: 20px;
  }

  .el-form-item__content {
    margin-left: 20% !important;
  }
}
</style>
